<template lang="">
  <div>

    <el-cascader-panel v-model="obj.pca" :options="pca" :props="{label:'name',value:'name'}" @change='findData'>
    </el-cascader-panel>
    <div style='margin-top:10px'>
      <div style='width:50%; float:left'>
        <el-form ref="form" class="demo-ruleForm" :rules='rules' :model="obj" label-width="80px">
          <el-form-item label="确诊" prop='outside'>
            <el-input v-model="obj.confirmed"></el-input>
          </el-form-item>
          <el-form-item label="疑似" prop='outside'>
            <el-input v-model="obj.suspected"></el-input>
          </el-form-item>
          <el-form-item label="死亡" prop='outside'>
            <el-input v-model="obj.dead"></el-input>
          </el-form-item>
          <el-form-item label="治愈" prop='outside'>
            <el-input v-model="obj.cure"></el-input>
          </el-form-item>
          <el-form-item label="重症" prop='outside'>
            <el-input v-model="obj.severe"></el-input>
          </el-form-item>
          <el-form-item label="境外输入" prop='outside'>
            <el-input v-model="obj.outside"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click='save' class='bg'>提交</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div style='width:47%; float:right;color:red;font-weight:800'>
        <div>温馨提示：</div>
        <div>1.先选择城市</div>
        <div>2.再录入数据</div>
      </div>
    </div>

  </div>
</template>

<script>
  import moment from "moment";
  import {
    mapActions,
    mapState
  } from "vuex";
  import pca from "../../assets/pca.json";
  export default {
    data() {
      var checkNum = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('内容不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(Number(value))) {
            callback(new Error('请输入数字值'));
          }
        }, 1000);
      };
      return {
        pca,
        obj: {
          country: "中国",
        },
        pca2: [],
        rules: {
          confirmed: [{
              required: true,
              message: "请输入确诊人数",
              trigger: "blur"
            },
            {
              min: 3,
              max: 5,
              message: "长度在 3 到 5 个字符",
              trigger: "blur"
            },
          ],
          outside: [{
            validator: checkNum,
            trigger: 'blur'
          }]
        },

      };
    },
    computed: {
      ...mapState("data_submit", ["dataList"]),
    },
    methods: {
      ...mapActions("data_submit", ["saveOrUpdate", "page_query"]),
      //查询某地区当天是否录入数据
      findData(val) {
        this.pca2 = this.obj.pca;
        //地区
        //moment(new Date()).format('YYYY-MM-DD')
        let params = {
          page: 1,
          pageSize: 1,
          area: val[2],
          city: val[1],
          inputTime: moment(new Date()).format("YYYY-MM-DD"),
        };
        this.page_query(params).then(() => {
          if (this.dataList.total > 0) {
            this.obj = this.dataList.list[0];
            this.obj.pca = [
              this.dataList.list[0].province,
              this.dataList.list[0].city,
              this.dataList.list[0].area,
            ];
          } else {
            this.obj = {};
            this.obj.pca = this.pca2;
            this.obj.country = "中国";
          }
        });
      },
      //数据上报
      save() {
        if (this.obj.pca) {
          this.obj.province = this.obj.pca[0];
          this.obj.city = this.obj.pca[1];
          this.obj.area = this.obj.pca[2];
        }
        this.saveOrUpdate(this.obj).then((res) => {
          this.$router.push({
            path: "/data/data_list",
          });
        });
      },
    },
  };

</script>
<style scoped>
  .bg {
    color: #fff;
    background-color: #2cb5ac;
  }

</style>
